<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="utf-8">
    <title>首页 </title>

    <!--移动设备优先-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <link rel="stylesheet" type="text/css" href="/static/index/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="/static/index/css/my.css" />
    <link rel="stylesheet" type="text/css" href="/static/index/css/font_1477105914_3430886.css">
    <link rel="stylesheet" type="text/css" href="/static/index/css/timesroll.css">
    <script src="/static/index/js/jquery-1.10.1.min.js" ></script>
    <script src="/static/index/js/scrollReveal.js"></script>
    <script src="/static/index/js/modernizr.js"></script>
    <style>
        body{
            background:url('/static/index/images/liuyan/bg.png');
        }

        .message{
            width: 600px;
            height: 190px;
            margin: 100px auto;
            background: #fff;
            border-radius: 10px;
            padding:8px 15px;
        }
        .message p{
            color: #666;
            font-size: 14px;
            line-height: 30px;
        }
        .message .text{
            height: 70px;
            border:1px solid #ddd;
            color: #666;
            line-height: 30px;
            text-indent: 10px;

        }
        .message .btn{
            margin-top: 10px;
            position: relative;
            width: 570px;
        }
        .message .btn .mes-btn{
           float: right;
            padding: 6px 20px;
            background: #ff9966;
            font-size: 12px;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
        }
        .message .btn ul{
            width: 390px;
            border:1px solid #ddd;
            position: absolute;
            top: 20px;
            left: 20px;
            background: #fff;
            padding: 5px;
            display: none;
        }
        .message .btn ul li{
            list-style-type:none;
            float: left;
            margin: 2px;
        }
        .main{
            width: 620px;
            margin: 50px auto;
        }
        .main .con{
            margin-bottom: 20px;
            background:#fff;
            padding: 0 10px;
        }
        .main .con .title{
            height: 55px;
            padding: 5px 0;
            border-bottom:1px dotted #666;
        }
        .main .con .title img{
            width: 48px;
            height: 48px;
            border-radius: 50%;
        }
        .main .con con-text{
            line-height: 30px;
            font-size:12px;
            color: #000;
        }
    </style>
</head>
<body>


<div class="container">
    <nav class="navbar navbar-default">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand visible-xs" href="#">博客导航</a>
        </div>
        <div class="collapse navbar-collapse menu" id="bs-example-navbar-collapse-1">
            <div class="navbar-header navbar-left">
                <a class="navbar-brand" href="{:url('index/index/index')}">
                    <img alt="Brand" src="/static/index/images/logo.jpg" width="100">
                </a>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li class="menu-active"><a href="{:url('index/index/index')}">首页</a></li>
                {volist name="cate" id="cate"}
                <li class="dropdown ">
                    <a href="/"  data-hover="dropdown">{$cate.cname}</a>
                    <ul class="dropdown-menu" role="menu">
                        {volist name="cate['cate2']" id="cate2"}
                        <li><a href="/category/{$cate2.id}" ><i class="icon-ok-sign"></i> {$cate2.cname}</a></li>
                        <li class="divider"></li>
                        {/volist}
                    </ul>
                </li>
                {/volist}
                <li class="menu-active"><a href="{:url('index/personal/review')}">留言</a></li>
                <li class="menu-active"><a href="http://nodejs.lyang.top">相册</a></li>
                {:empty($Think.session.user) && empty($Think.session.qq) ? "<li><a href=\".url('index/login/index').\">登录/注册</a></li>" : ''}
                {:empty($Think.session.user) ? '' : "<li class='dropdown '><a href=\".url('index/personal/index').\"  data-hover='dropdown'><img width='20' height='20' src=\".$Think.session.user.figureurl.\" class='img-circle'>".$Think.session.user.nickname."</a><ul class='dropdown-menu' role='menu'><li><a href=\".url('index/personal/exit').\" ><i class='icon-ok-sign'></i> 退出登录</a></li><li class='divider'></li></ul></li>"}
                {:empty($Think.session.qq) ? '' : "<li class='dropdown '><a href=''  data-hover='dropdown'><img width='20' src=\".$Think.session.qq.figureurl.\" class='img-circle'>".$Think.session.qq.nickname."</a><ul class='dropdown-menu' role='menu'><li><a href=\".url('index/personal/exit').\" ><i class='icon-ok-sign'></i> 退出登录</a></li><li class='divider'></li></ul></li>"}

            </ul>
            <div class="menu-bar"></div>
            <div class="menu-clean"></div>
        </div>
    </nav>
</div>
<!--头部结束-->
<div class="container">
    <div class="row">
        <div class="message">
            <p>有什么事想告诉我？</p>
            <div class="text" contenteditable="true"></div>
            <div class="btn">
                <img style="float: left" class="face-btn" src="/static/index/images/bba_thumb.gif" />
                <span class="mes-btn">发表</span>
                <ul>
                    {volist name="looks" id="looks"}
                    <li><img src="/static/upload/look/{$looks.look}"/></li>
                    {/volist}
                </ul>
            </div>
        </div>
        <div class="main">
            <div class="con" id="mes_con" style="font-size: 30px;color: red;text-align: center;{:empty($reviews) ? 'display: block' : 'display:none;';}">暂无留言</div>
            {volist name="reviews" id="reviews"}
            <div class="con">
                <div class="title">
                    <img src="{$reviews['figureurl']}" align="absmiddle" />{$reviews['nickname']}
                    <span style="float: right;">{:Date('Y:m:d H:m:s',$reviews['re_time'])}</span>
                </div>
                <div class="con-text">{$reviews['content']}</div>
		    </div>
            {/volist}
        </div>
        <script type="text/javascript">
            $(".mes-btn").click(function(){
                var Con=$('.text').html();
                if (Con=="") {
                    $('.text').focus()
                }else{
                    $.ajax({
                        type : 'post',
                        data : {'content':Con},
                        url : "{:url('index/personal/isLogin')}",
                        datatype : 'json',
                        success : function(data){
                            if(data.status){
                                $('#mes_con').css({'display' : 'none'});
                                alert(data.message);
                                $(".main").prepend('<div class="con"><div class="title"><img src="'+data.figureurl+'" align="absmiddle" />'+data.nickname+'<span style="float: right;">'+data.time+'</span></div><div class="con-text">'+Con+'</div></div>');
                                Con=$('.text').html('');
                            }else{
                                alert(data.message);
                            }
                        }
                    });
                }

            });
            $('.face-btn').click(function(e){
                $('.message ul').slideDown();
                e.stopPropagation();//阻止冒泡事件
            });
            $(document).click(function(){
                $('.message ul').slideUp();
            });
            $(".message ul li").click(function(){
                var img=$(this).find('img').clone();//克隆
                $('.text').append(img);
            });
        </script>
    </div>
</div>
{include file="index/footer" /}